<template>
	<a-modal
		class="uploade-dialog"
		:maskClosable="false"
		v-model:visible="visible"
		:title="$t('personalCenter.uploadNewAvatar', '上传头像')"
		@cancel="handleCancel"
		@ok="handleOk"
	>
		<template #closeIcon>
			<i class="icon"></i>
		</template>
		<div class="dialog-box">
			<div class="dialog-box-left">
				<div class="left-img">
					<img v-show="cropperImg" style="" :src="cropperImg" ref="image" />
					<div
						v-if="!cropperImg"
						class="left-no-img"
						:class="`${formData.gender === 2 ? 'gender-pink' : 'gender-blue'}`"
					>
						{{ showName }}
					</div>
				</div>
				<div class="left-operation">
					<span class="left-operation-uploade" @click="uploade">
						{{ $t('personalCenter.localUpload', '本地上传') }}
						<input
							class="left-operation-input"
							type="file"
							id="upload_file"
							@change="uploadImg($event)"
						/>
					</span>

					<div class="left-operation-icon" v-if="cropperImg">
						<i class="low-code icontianjia" @click="onZoom('enlarge')"></i>
						<i class="low-code iconshanchu" @click="onZoom('na rrow')"></i>
						<i class="low-code iconshuaxin" @click="onRotate"></i>
					</div>
				</div>
			</div>
			<div class="dialog-box-right">
				<div class="right-img" v-if="cropperImg"></div>
				<div
					class="right-no-img"
					:class="`${formData.gender === 2 ? 'gender-pink' : 'gender-blue'}`"
					v-else
				>
					{{ showName }}
				</div>
				<span class="right-text">{{
					$t('personalCenter.imagePreview', '图像预览')
				}}</span>
				<span class="right-text">102*102</span>
			</div>
		</div>
		<template #footer>
			<a-button key="back" @click="handleCancel">{{
				$t('personalCenter.cancel', '取消')
			}}</a-button>
			<a-button
				key="submit"
				type="primary"
				:loading="loading"
				@click="handleOk"
				>{{ $t('personalCenter.confirm', '确认') }}</a-button
			>
		</template>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch, nextTick, toRefs } from 'vue'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
import { ColSize } from 'ant-design-vue/lib/grid/Col'
import message from 'ant-design-vue/lib/message'
export default defineComponent({
	props: {
		formData: {
			type: Object,
			default: {},
		},
	},

	setup(props, context) {
		const visible = ref<boolean>(true)
		const cropperImg: any = ref(null)
		let isEn = false
		const showName: any = ref()
		const myCropper: any = ref(null)
		const image: any = ref()
		const imgName: any = ref(null)
		let afterImg: any = null

		//取消
		const handleCancel = () => {
			visible.value = false
			context.emit('update:isOpen', false)
		}

		// 确认
		const handleOk = (e: MouseEvent) => {
			if (cropperImg.value) {
				afterImg = myCropper.value
					.getCroppedCanvas({
						imageSmoothingQuality: 'high',
					})
					?.toDataURL('image/jpeg')
				context.emit('imgUrl', afterImg)
			}
			visible.value = false
			context.emit('update:isOpen', false)
		}

		const init = () => {
			myCropper.value = new Cropper(image.value, {
				aspectRatio: 1 / 1,
				viewMode: 3,
				autoCropArea: 0.7,
				preview: '.right-img',
			})
		}

		const onRotate = () => {
			myCropper.value.rotate(90)
		}

		const onZoom = (type: string) => {
			if (type === 'enlarge') {
				myCropper.value.zoom(0.1)
			} else {
				myCropper.value.zoom(-0.1)
			}
		}

		const uploade = () => {
			const uploadeFile: any = document.getElementById('upload_file')
			uploadeFile.click()
		}

		//上传新图片
		const uploadImg = (event: any) => {
			const file = event.target.files[0]
			const testmsg: any = /^image\/(jpeg|png)$/.test(file.type)
			if (testmsg) {
				cropperImg.value = URL.createObjectURL(file)
				myCropper.value.replace(cropperImg.value)
				imgName.value = file.name
			} else {
				message.error('仅支持上传jpg和png格式的图片！', 1.5)
			}
			event.target.value = ''
		}

		// 处理展示名称
		const getShowName = () => {
			const originName = props.formData.employee_name || ''
			if (!originName) return ''
			// 引文展示大写的首字母
			const firstStr = originName.substr(0, 1)
			if (/^[a-zA-Z]/.test(firstStr)) {
				isEn = true
				return firstStr.toLocaleUpperCase()
			}
			// 中文取后两个汉字
			isEn = false
			return originName.substr(-2)
		}
		cropperImg.value = props.formData.avatar_url
		showName.value = getShowName()
		onMounted(() => {
			nextTick(() => {
				init()
			})
		})

		return {
			visible,
			handleOk,
			cropperImg,
			showName,
			image,
			uploade,
			uploadImg,
			onRotate,
			myCropper,
			onZoom,
			handleCancel,
		}
	},
})
</script>
<style lang="less" scoped>
.icon {
	display:block;
	margin:14px;
	width: 23px;
	height: 23px;
	background-image: url(/public/icon/close.svg);
	cursor: pointer;
}
.uploade-dialog {
	width: 510px;
	.ant-modal-close-x {
		color: #ffffff;
	}
	.dialog-box {
		display: flex;
		height: 330px;
		.dialog-box-right {
			padding-left: 56px;
		}
		.dialog-box-right {
			width: 90px;
			height: 90px;
		}
		.right-img {
			width: 90px;
			height: 90px;
			margin-bottom: 12px;
			border-radius: 50%;
			overflow: hidden;
		}
		.gender-pink {
			background: linear-gradient(180deg, #fd99d5 0%, #e672b7 100%);
		}
		.gender-blue {
			background: linear-gradient(360deg, #387ff5 3.21%, #64a3ff 99.42%);
		}
		.right-no-img {
			width: 90px;
			height: 90px;
			margin-bottom: 12px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32px;
			color: @rok-white-color;
		}
		.right-text {
			display: inline-block;
			font-size: 14px;
			text-align: center;
			width: 90px;
		}
	}
	.left-img {
		width: 300px;
		height: 300px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
		.left-no-img {
			width: 100%;
			height: 100%;
			display: flex;
			font-size: 60px;
			justify-content: center;
			align-items: center;
			color: @rok-white-color;
		}
	}
	.left-operation {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}
	.left-operation-uploade {
		color: var(--bl-brand-c);
		font-size: 14px;
		cursor: pointer;
	}
	.left-operation-input {
		display: none;
	}
	.left-operation-icon {
		.low-code {
			font-size: 22px;
			margin-left: 19px;
			cursor: pointer;
			&:hover {
				color: var(--bl-brand-c);
			}
		}
	}
}
</style>
